<template>
	<view class="content">
		<view class="top" :style="{
			'background-image': $img('https://junhe-project.oss-cn-beijing.aliyuncs.com/img/2022-03-05/164646464351352.png'),
			'padding-top':$top()+'px'
		}">
			<text>
				{{$jf('澳葡严选','澳葡嚴選')}}
			</text>
			<view class="top_1">
				<image src="../../static/img/ssuo.png" />
				<input confirm-type="search" type="text" v-model="name" :placeholder="$jf('请输入搜索的商品','請輸入搜索的商品')" />
			</view>
		</view>
		<view class="body">
			<view class="body1" :style="{
					'height':$height()*1-121-50+'px',
				}">
				<view @click="xuand(item)" :class="{
					body1_1:true,
					xuan:item.id==xuan.id
				}" v-for="(item,index) in list">
					<text class="xin" v-if="item.id==xuan.id"></text>
					<text>
						{{item.name}}
					</text>
				</view>

			</view>
			<view class="body2" :style="{
					'height':$height()*1-121-50+'px',
				}">
				<view class="body2_1" @click="submit(item)" v-for="(item,index) in infolist">
					<view class="body2_1_1">
						<block v-if="item.label.split(',').length>0" v-for="(a,indexs) in item.label.split(',')">
							<text v-if="a==1">{{$jf('邀请好友赚取佣金','邀請好友賺取傭金')}}</text>
							<text v-if="a==2">{{$jf('热销单品','熱銷單品')}}</text>
						</block>
						<image style="width: 250rpx;height: 286rpx;" :src="item.logo" />
					</view>
					<view style=" padding:  0 10rpx 10rpx 10rpx ">
						<view class="body2_1_2">
							{{item.goods_name}}
						</view>
						<view class="body2_1_3">
							<text>{{item.count}}+{{$jf('条评论','條評論')}}</text>
							<text>{{$jf('好评','好評')}}{{item.praise}}%</text>
						</view>
						<view class="body2_1_4">
							<text>￥{{item.goods_price}}</text>
							<text @click.stop="jiaru">{{$jf('加入购物车','加入購物車')}}</text>
						</view>
					</view>
				</view>
				<view v-if="infolist.length==0" 
				style="position: absolute;
		z-index:999;
		left: 50%; 
		top: 50%; 
		transform: translate(-50%, -50%)">
					<text>~{{$jf('没有数据','沒有數據')}}~</text>
				</view>
				<!-- <my-kong v-if="infolist.length==0" /> -->
				<u-loadmore v-if="infolist.length>0" style="margin-top: 20rpx;" :status="status" icon-type="flower"
					@loadmore="loadmore" :load-text="{
					loadmore: $jf('点击或轻轻上拉','點擊或輕輕上拉'),
					loading: $jf('努力加载中','努力加載中'),
					nomore: $jf('实在没有了','努力加載中')
				}" />
			</view>
		</view>
		<!-- 、、消息提示 -->
		<xx-ts ref="child"></xx-ts>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				status: 'loadmore',
				xuan: {},
				info: {},
				list1: {},
				name: '', //搜索商城
				form: {
					page: 1,
					type: 1
				}
			};
		},

		onLoad(e) {

		},
		onHide() {
			this.$store.commit("ka", null)
			console.log('离开2')
		},
		computed: {
			infolist() {
				if (this.$store.state.ziti == 1) {
					return this.info.data
				} else {
					return this.info.multiply
				}
			},
			list() {
				if (this.$store.state.ziti == 1) {

					return this.list1.simple
				} else {
					return this.list1.multiply
				}
			}
		},
		onShow() {
			this.api('index/goodsList').then(res => {
				this.list1 = res.data
				console.log()
				if (this.$store.state.ka) {
					this.xuan = this.$store.state.ka
				} else {
					this.xuan = this.list[0]
				}
				this.getinfo()
			})

		},
		// 下拉刷新
		onPullDownRefresh() {
			this.form.page = 1
			this.getinfo(),
				setTimeout(() => {
					uni.stopPullDownRefresh()
				}, 300)
		},
		// 上拉加载刷新
		onReachBottom() {
			this.form.page++

			this.getinfo()
		},
		methods: {
			//分页
			loadmore() {
				this.form.page++
				this.getinfo()
			},
			xuand(v) {
				this.xuan = v
				this.form.page = 1
				this.status = 'loadmore',
					this.getinfo()
			},
			getinfo() {
				this.form.type = this.xuan.id
				this.api('goods/index', this.form).then(res => {
					if (this.form.page == 1) {
						this.info = res.data
					} else {
						if (res.data.data.length > 0) {
							this.info.data.push(...res.data.data)
							this.info.multiply.push(...res.data.multiply)
						} else {
							this.status = "nomore"
						}
					}

				})
			},
			//加入购物车
			jiaru() {
				// this.api('goods/shoppigAdd',{
				// 	number:1,
				// 	number:1,
				// 	number:1,

				// }).then(res=>{
				// 	this.$toast(res.msg)
				// })
				// this.$refs.child.sing()
			},
			// 详情
			submit(item) {
				uni.navigateTo({
					url: `./details?id=${item.goods_id}`
				})
			}
		}
	}
</script>

<style lang="scss">
	.content {
		.body {
			display: flex;
			min-height: 1000rpx;

			.body1 {
				overflow: auto;
				width: 180rpx;
				text-align: center;
				background: #F4F4F4;

				.xuan {
					background: #FFFFFF;
					font-size: 26rpx;
					font-family: Source Han Serif CN;
					font-weight: bold;
					color: #00795E;
					line-height: 110px;
				}

				.xin {
					position: absolute;
					width: 6rpx;
					height: 36rpx;
					background: #00795E;
					left: 0;
					top: 50%;
					transform: translate(0, -50%);
				}

				.body1_1 {
					position: relative;
					display: block;
					height: 100rpx;
					line-height: 100rpx;
				}

			}

			.body2 {
				position: relative;
				width: 100%;
				padding: 25rpx;
				overflow: auto;

				.body2_1 {
					margin-bottom: 20rpx;
					height: 620rpx;
					padding-top: 20rpx;
					background: #FFFFFF;
					border: 1px solid #E5E5E5;
					border-radius: 10px;
					position: relative;

					.body2_1_4 {
						position: absolute;
						display: flex;
						align-items: center;
						justify-content: space-between;
						justify-content: space-between;
						width: 100%;
						bottom: 20rpx;

						text:nth-of-type(1) {
							font-size: 30rpx;
							font-family: Source Han Serif CN;
							font-weight: bold;
							color: #AB1E25;
						}

						text:nth-of-type(2) {
							margin-right: 30rpx;
							display: block;
							width: 196rpx;
							height: 70rpx;
							background: #00795E;
							border-radius: 35rpx;
							font-size: 30rpx;
							font-family: Source Han Serif CN;
							font-weight: 600;
							line-height: 70rpx;
							text-align: center;
							color: #FFFFFF;

						}
					}

					.body2_1_3 {
						margin-top: 20rpx;
						display: flex;
						justify-content: space-between;

						text {
							font-size: 24rpx;
							font-family: Source Han Serif CN;
							font-weight: 400;
							color: #999999;
						}
					}

					.body2_1_2 {
						min-height: 96rpx;
						display: flex;
						align-items: flex-end;
						padding: 0rpx 0rpx 10rpx 0rpx;
						font-size: 30rpx;
						font-family: Source Han Serif CN;
						font-weight: bold;
						color: #181818;
						border-bottom: 1px solid #E5E5E5;
					}

					.body2_1_1 {
						position: relative;
						height: 340rpx;
						// border: 1rpx solid black;
						display: flex;
						align-items: center;
						justify-content: center;

						text:nth-of-type(1) {
							text-align: center;
							left: 0;
							line-height: 40rpx;
							border-radius: 0 50rpx 50rpx 0;
							font-size: 20rpx;
							font-family: Source Han Serif CN;
							font-weight: 400;
							top: 2%;
							z-index: 999;
							color: #FFFFFF;
							display: block;
							position: absolute;
							width: 200rpx;
							height: 40rpx;
							background-color: rgb(177, 42, 49);
						}

						text:nth-of-type(2) {
							z-index: 999;
							left: 0;
							text-align: center;
							line-height: 40rpx;
							border-radius: 0 50rpx 50rpx 0;
							font-size: 20rpx;
							font-family: Source Han Serif CN;
							font-weight: 400;
							color: #FFFFFF;
							top: 20%;
							display: block;
							position: absolute;
							width: 120rpx;
							height: 40rpx;
							background-color: rgb(255, 152, 0);
						}

						text-align: center;

						image {
							margin-top: 50rpx;
							width: 307rpx;
							height: 306rpx;
						}

					}
				}
			}

		}

		.top {
			height: 243rpx;
			background-size: 100% 100%;
			position: relative;
			background-repeat: no-repeat;

			.top_1 {
				position: absolute;
				left: 50%;
				transform: translate(-50%);
				bottom: 20rpx;
				height: 70rpx;
				display: flex;
				align-items: center;
				justify-content: space-around;
				width: 90%;
				margin: 0 auto;
				background: #F4F4F4;
				border-radius: 10px;

				input {
					width: 86%;
				}

				image {
					width: 31rpx;
					height: 31rpx;
				}
			}

			text {
				text-align: center;
				display: block;
				font-size: 30rpx;
				font-family: Source Han Serif CN;
				font-weight: bold;
				color: #FFFFFF;
			}

		}
	}
</style>
